<template>
    <div class="system-encode">
        <el-card class="box-card" >
            <!--条件查询框-->
            <div class="grid-content bg-purple-dark">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="目标表单">
                        <el-select v-model="formInline.en_form" placeholder="请选择">
                            <el-option label="货品信息" value="货品信息"></el-option>
                            <el-option label="入库单" value="入库单"></el-option>
                            <el-option label="出库单" value="出库单"></el-option>
                            <el-option label="盘点单" value="盘点单"></el-option>
                            <el-option label="调拨单" value="调拨单"></el-option>
                            <el-option label="进货单" value="进货单"></el-option>
                            <el-option label="进货退货单" value="进货退货单"></el-option>
                            <el-option label="销售单" value="销售单"></el-option>
                            <el-option label="销售退货单" value="销售退货单"></el-option>
                            <el-option label="领用订单" value="领用订单"></el-option>
                            <el-option label="客户" value="客户"></el-option>
                            <el-option label="供应商" value="供应商"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="编号前缀">
                        <el-input v-model="formInline.en_prefix" placeholder="请输入编号前缀"></el-input>
                    </el-form-item>
                    <el-form-item label="时间规则">
                        <el-input v-model="formInline.en_time" placeholder="请输入"></el-input>
                    </el-form-item>
                    <div id="ys1" class="grid-content bg-purple">
                        <el-form-item label="操作时间" style="margin-top: 25px; width: 615px">
                            <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="grid-content bg-purple" style="margin-top: 25px; width: 620px; float: right">
                        <el-form-item>
                            <el-button @click="CZ()">重置</el-button>
                            <el-button type="success" @click="dy()">查询</el-button>
                            <el-button @click="Xinzen()"  plain>新增</el-button>
                            <el-button @click="XiaZai2()" plain>导出</el-button>
                        </el-form-item>
                    </div>

                </el-form>
            </div>

            <!-- 数据表格与按钮 -->
            <el-table
                ref="multipleTable"
                :data="Adate"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName"
            >
                <el-table-column type="selection" width="50"> </el-table-column>

                <el-table-column label="序号" prop="en_code"> </el-table-column>
                <el-table-column prop="en_form" label="目标表单"> </el-table-column>
                <el-table-column prop="en_prefix" label="编号前缀"> </el-table-column>
                <el-table-column prop="en_time" label="时间规则"> </el-table-column>
                <el-table-column prop="en_num" label="流水号/位"> </el-table-column>
                <el-table-column prop="en_step" label="步长"> </el-table-column>
                <el-table-column prop="en_rules" label="编号生成规则">
                </el-table-column>
                <el-table-column prop="create_by" label="操作人"> </el-table-column>
                <el-table-column prop="create_time" label="操作时间"> </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="Bianji(scope.row.en_code)"
                    >编辑</el-button
                    >
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.dqy"
                :page-sizes="[2, 4, 6, 8, 10]"
                :page-size="this.mys"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.zts"
                >
                </el-pagination>
            </div>
            <!-- 编辑抽屉表单 -->
                <el-drawer title="编辑" :visible.sync="drawer" size="35%">
                    <!-- 卡片 -->
                    <el-card class="box-card" style="width: 95%; margin: 0 auto">
                    <div>
                        <el-descriptions
                        class="margin-top"
                        :column="2"
                        direction="vertical"
                        >
                        <el-descriptions-item label="目标表单">
                            <el-input
                            v-model="Bdate.en_form"
                            :disabled="true"
                            type=" width: 100px;"
                            >
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编码前缀" :span="1">
                            <el-input v-model="Bdate.en_prefix" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="时间规则" :span="2">
                            <el-checkbox-group v-model="checkList">
                            <el-checkbox label="年" @change="SJGZ('年')"
                                >年YYYY</el-checkbox
                            >
                            <el-checkbox label="月" @change="SJGZ('月')"
                                >月MM</el-checkbox
                            >
                            <el-checkbox label="日" @change="SJGZ('日')"
                                >日DD</el-checkbox
                            >
                            </el-checkbox-group>
                        </el-descriptions-item>

                        <el-descriptions-item label="流水号/位">
                            <el-input v-model="Bdate.en_num" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="步长">
                            <el-input v-model="Bdate.en_step" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编码生成规则" :span="2">
                            <el-input
                            v-model="Bdate.en_rules"
                            placeholder="请输入内容"
                            maxlength="20"
                            >
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编号预览" :span="2">
                            {{ YK }}
                        </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    </el-card>

                    <div style="float: right; margin-right: 40px; margin-top: 40px">
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button type="success" @click="Update()">保存</el-button>
                    </div>
                </el-drawer>
                <!-- 新增抽屉表单 -->
                <el-drawer title="新增" :visible.sync="drawer1" size="35%">
                    <!-- 卡片 -->
                    <el-card class="box-card" style="width: 95%; margin: 0 auto">
                    <div>
                        <el-descriptions
                        class="margin-top"
                        :column="2"
                        direction="vertical"
                        >
                        <el-descriptions-item label="目标表单">
                            <el-input
                            v-model="formInline1.en_form"
                            type=" width: 100px;"
                            >
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编码前缀" :span="1">
                            <el-input v-model="formInline1.en_prefix" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="时间规则" :span="2">
                            <el-checkbox-group v-model="checkList">
                            <el-checkbox label="年" @change="SJGZ('年')"
                                >年YYYY</el-checkbox
                            >
                            <el-checkbox label="月" @change="SJGZ('月')"
                                >月MM</el-checkbox
                            >
                            <el-checkbox label="日" @change="SJGZ('日')"
                                >日DD</el-checkbox
                            >
                            </el-checkbox-group>
                        </el-descriptions-item>

                        <el-descriptions-item label="流水号/位">
                            <el-input v-model="formInline1.en_num" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="步长">
                            <el-input v-model="formInline1.en_step" placeholder="请输入内容">
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编码生成规则" :span="2">
                            <el-input
                            v-model="formInline1.en_rules"
                            placeholder="请输入内容"
                            maxlength="20"
                            >
                            </el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="编号预览" :span="2">
                            {{ YK1 }}
                        </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    </el-card>

                    <div style="float: right; margin-right: 40px; margin-top: 40px">
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button type="success" @click="Insert()">保存</el-button>
                    </div>
                </el-drawer>
        </el-card>
    </div>
</template>

<script>
import $http from '@/http/base.js';
export default {
    data(){
        return{
            formInline: {
                en_time: "",
                en_prefix: "",
                en_form: "",
            },
            formInline1:{
                en_form:"",
                en_prefix:"",
                en_num:"",
                en_step:"",
                en_rules:"",
            },
            value1:[],
            Adate:[],
            Bdate:[],//id查询数据
            checkList: [],
            mys: 2,
            dqy: 1,
            zts: 0,
            qsj: "",
            hsj: "",
            id:0,
            drawer: false,//关闭
            drawer1:false,//新增关闭
            YK:"",
            YK1:"",
            uname:"admin",
            czsj:"",
            zhsj:"",
            zdz:1,
        }
    },
    methods:{
        //分页查询
        FenYeCha(){
            console.log("目标表"+this.formInline.en_form+"编号前缀"+this.formInline.en_prefix);
            $http
                .get('api/Sys_Encode/SEFCFenSelect?mys='+this.mys+'&dqy='+this.dqy+'&qsj='+this.qsj+'&hsj'+this.hsj+'&en_form='+this.formInline.en_form+'&en_prefix='+this.formInline.en_prefix+'&en_time='+this.formInline.en_time)
                .then((res) =>{
                    this.Adate = res.list;
                    this.zts = res.zts;
                    console.log(res.list)
                    console.log("已经查询")
                })
                .catch((err) => {
                    alert("查询失败"), console.log(err);
                });
        },
        //获取表单按钮选中的信息
        handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
        },
        //条数改变
        handleSizeChange(val) {
        this.mys = val;
        this.FenYeCha();
        },
        //页数改变
        handleCurrentChange(val) {
        this.dqy = val;
        this.FenYeCha();
        },
        //隔行变色
        tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
            return "warning-row";
        }
        return "";
        },
        //重置
        CZ(){
            (this.formInline.en_time = ""),
            (this.formInline.en_prefix = ""),
            (this.formInline.en_form = ""),
            (this.qsj = ""),
            (this.hsj = "");
        },
        Bianji(id) {
            this.id = id;
            $http
                .get('api/sys_Encode/IdSelect?id=' + id)
                .then((res) => {
                this.Bdate = res;
                this.checkList = res.en_time.split("");
                this.YK = res.en_rules;
                console.log(this.checkList);
                console.log(res);
                })
                .catch((err) => {
                alert("查询失败"), console.log(err);
                });
            //打开抽屉
            this.drawer = true;
        },
        Xinzen(){
            this.drawer1 = true;
        },
        //时间规则 -- 复选框操作
        SJGZ(xz) {
            var checkList1 = this.checkList.slice();
            const isSelected = this.checkList.includes(xz);
            const labelValue = this.getLabelValue(xz);
            console.log(`选项 ${labelValue} 是否选中: ${isSelected}`);
            if (!isSelected) {
                // 取消选中删除的逻辑
                const index = checkList1.findIndex((item) => item === xz);
                if (index !== -1) {
                checkList1.splice(index, 1);
                }
            } else {
                // 确定选中增加的逻辑
                const existingIndex = checkList1.findIndex((item) => item === xz);
                if (existingIndex === -1) {
                checkList1.push(xz);
                }
            }
            //排序
            checkList1.sort((a, b) => {
                // 定义排序规则
                const order = ["年", "月", "日","时","分","秒"];
                return order.indexOf(a) - order.indexOf(b);
            });
            //生成编码规则--新增
            this.YK1 =
                this.formInline1.en_prefix +
                checkList1.map((option) => this.getLabelValue(option)).join("") +
                "0001";
            this.formInline1.en_rules = this.YK1;
            console.log("预演信息：" + this.YK1);
            //生成编码规则--修改
            this.YK =
                this.Bdate.en_prefix +
                checkList1.map((option) => this.getLabelValue(option)).join("") +
                "0001";
            this.Bdate.en_rules = this.YK;
            console.log("预演信息：" + this.YK);
            //将复选框信息变为字符串
            this.zf = checkList1.join("");
            console.log(this.zf);
        },
        //时间规范   复选框
        getLabelValue(option) {
            // 根据选项获取对应的 label 值
            switch (option) {
                case "年":
                return "YYYY";
                case "月":
                return "MM";
                case "日":
                return "DD";
                case "时":
                return "HH";
                case "分":
                return "MM";
                case "秒":
                return "SS";
                default:
                return "";
            }
        },
        Update(){
            this.SJGZ();
            $http
                .put('api/Sys_Encode/Updelete?en_code='+this.id+'&en_form='+this.Bdate.en_form+'&en_prefix='+this.Bdate.en_prefix+'&en_time='+this.zf+'&en_num='+this.Bdate.en_num+'&en_step='+this.Bdate.en_step+'&en_rules='+this.Bdate.en_rules+'&create_by='+this.uname+'&create_time='+this.czsj)
                .then(res =>{
                    alert("规则修改成功")
                    this.FenYeCha();
                    this.drawer = false;
                })
                .catch((err) => {
                    alert("修改失败"), console.log(err);
                });
        },
        //获取当前时间
        getCurrentDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = this.formatTime(now.getMonth() + 1);
            const day = this.formatTime(now.getDate());
            this.czsj = `${year}-${month}-${day}`;
            this.zhsj = `${year}-${month}-${day}`;
        },
        formatTime(time) {
            return time < 10 ? `0${time}` : time;
        },
        Insert(){
            this.SJGZ();
            $http
                .post('api/Sys_Encode/Insert?en_form='+this.formInline1.en_form+'&en_prefix='+this.formInline1.en_prefix+'&en_time='+this.zf+'&en_num='+this.formInline1.en_num+'&en_step='+this.formInline1.en_step+'&en_rules='+this.formInline1.en_rules+'&create_by='+this.uname+'&create_time='+this.czsj+'&max_num='+this.zdz+'&last_date='+this.zhsj)
                .then(res =>{
                    alert("规则新增成功")
                    this.FenYeCha();
                    this.drawer1 = false;
                })
                .catch((err) => {
                    alert("新增失败"),console.log(err);
                });
        },
        dy() {
            this.FenYeCha();
        },
    },
    mounted(){
        this.FenYeCha();
        this.getCurrentDate();
    }
}
</script>

<style scoped>
.system-encode{
    width: 100%;
    height: 100%
}
.box-card{
    background-color: rgb(255, 255, 255);
}
</style>